<template>
	<view class="page">
		<view class="user-info">
			<view class="info-title">
				<text>你的信息</text>
				<view class='logon-btn' @click="handleLogon">退出登录</view>
			</view>
			<view class="">
				标识: {{user._id}}
			</view>
			<view class="">
				账号: {{user.acc}}
			</view>
			<view class="">
				密码: {{user.pwd}}
			</view>
		</view>
		<view class="list">
			<view class="list-title">
				题库
			</view>
			<view :class="['list-item', {'active': index === current}, {'first-item': index === 0}]"
				@click="current=index" v-for="(item, index) in list" :key="index">
				{{item.name}}
			</view>
			<view class="list-opts">
				<button type="primary" @click='handleSelect' :disabled="current===-1">选择</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		getQuestionBankList
	} from '@/api/questionBank.js'

	const user = reactive({
		acc: '',
		pwd: '',
	})
	const current = ref(-1)
	const list = ref([])

	const handleLogon = () => {
		console.log('handleLogon');
		uni.redirectTo({
			url: '/pages/login/login'
		})
	}

	const handleSelect = () => {
		console.log('点击选择', 'handleSelect');
		uni.navigateTo({
			url: '/pages/practiceQuestion/practiceQuestion?id=' + list.value[current.value]._id
		})
	}

	onMounted(async () => {
		const userStorage = uni.getStorageSync('user')
		// console.log(userStorage);
		for (const key in userStorage) {
			user[key] = userStorage[key]
		}

		list.value = await getQuestionBankList()
	})
</script>

<style lang="scss" scoped>
	.page {
		padding: 10rpx;

		.user-info {
			margin: 24rpx 20rpx 0;
			background-color: #42b983;
			color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;

			.info-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.logon-btn {
					color: red;
					width: max-content;
					height: max-content;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}

		.list {
			padding: 0 20rpx;
			margin-top: 16rpx;

			.list-title {
				position: relative;
				height: 80rpx;
				display: flex;
				align-items: center;
				padding-left: 24rpx;

				&::before {
					content: "";
					display: block;
					position: absolute;
					height: 40rpx;
					width: 12rpx;
					border-radius: 6rpx;
					background-color: #42b983;
					top: 0;
					bottom: 0;
					margin: auto;
					left: 0;
				}
			}

			.list-item {
				margin-top: 20rpx;
				background-color: #f5f5f5;
				padding: 0 24rpx;
				height: 72rpx;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				color: #333;

				&.first-item {
					margin-top: 0;
				}

				&.active {
					color: #fff;
					background-color: #42b983;
				}
			}

			.list-opts {
				margin-top: 24rpx;
				display: flex;
				align-items: center;
			}
		}
	}
</style>